/*
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-07-14 14:17:49
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-19 15:02:19
 * @FilePath: \passiflora-edulis-sims\src\stores\leafer-app-store.ts
 * @Description: 存放用来渲染的frame列表
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
 */
import type { IFrame, IUI } from 'leafer-ui'
import { Text } from 'leafer-ui'
import { App } from 'leafer-ui'
import { defineStore, acceptHMRUpdate } from 'pinia'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)
import '@leafer-in/export' // 引入导出元素插件 //
import '@leafer-in/view' // 引入导出元素插件 //

// 对照或者垂直
type IShowType = 'contrast' | 'vertical'

export const useLearferAppStore = defineStore('LearferApp', {
  state: () => ({
    app: new App(),
    frames: {} as Record<string, IUI[]>,
    show_type: 'contrast' as IShowType,
  }),

  getters: {},

  actions: {
    create_app() {
      this.app = new App({
        view: 'leafer-view',
        editor: {},
        fill: '#ecfcff',
      })
      this.app.tree.add(
        new Text({
          fontSize: 100,
          text: 'Hello World',
          editable: true,
        })
      )
    },
    add(name: string, uis: IUI | IUI[]) {
      if (Array.isArray(uis)) {
        this.frames[name] = uis
      } else {
        this.frames[name] = [uis]
      }
    },
    clear() {
      this.app.tree.clear()
      this.frames = {}
    },
    /**
     * 渲染 app
     */
    draw() {
      const topic_frames = this.frames['topic'] ? this.frames['topic'] : []
      const ans_frames = this.frames['ans'] ? this.frames['ans'] : []
      const white_num = 200
      for (let i = 0; i < topic_frames.length, i < ans_frames.length; i++) {
        const topic_frame = topic_frames[i]?.clone() as IFrame // 使用clone 防止污染初始对象
        const ans_frame = ans_frames[i]?.clone() as IFrame

        const height = topic_frame.height as number

        if (this.show_type == 'contrast') {
          // 设置 topic 和 ans 的frame 位置
          // 对于 topic 来说 它需要改变的是 Y 坐标
          topic_frame.y = (height + white_num) * i
          // 对于ans 来说 它的 x坐标和y坐标都需要改变
          ans_frame.y = (height + white_num) * i
        } else {
          topic_frame.x = 0
          ans_frame.x = 0

          topic_frame.y = (height + white_num) * i
          ans_frame.y = (height + white_num) * (i + topic_frames.length)
        }
        this.app.tree.add([topic_frame, ans_frame])
      }
      // 让画布内容居中显示
      this.app.tree.zoom('fit', 2)
      this.app.tree.zoom('fit', 0, true)
    },
    export_frame() {
      const topic_frames = this.frames['topic'] ? this.frames['topic'] : []
      const ans_frames = this.frames['ans'] ? this.frames['ans'] : []
      for (let i = 0; i < topic_frames.length, i < ans_frames.length; i++) {
        const topic_frame = topic_frames[i]?.clone() as IFrame
        const ans_frame = ans_frames[i]?.clone() as IFrame
        void topic_frame.export(`topic_${topic_frame.innerId}_${i}.png`, {
          pixelRatio: 2,
        }) // 导出2倍高清图
        void ans_frame.export(`answer_${ans_frame.innerId}_${i}.png`, {
          pixelRatio: 2,
        }) // 导出2倍高清图
      }
    },
  },
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useLearferAppStore, import.meta.hot))
}
